<template>
  <div>
    <Card>
      <tables
        ref="tables"
        editable
        searchable
        search-place="top"
        v-model="tableData"
        :columns="columns"
        @goSearch="searchTable"
        @goAdd="goAdd"
        @on-delete="deleteData"
      />
      <Page
        :total="total"
        show-elevator
        @on-change="changePage"
        :current.sync="current"
      ></Page>
      <Button style="margin: 10px 0" type="primary" @click="exportExcel"
        >导出为Csv文件</Button
      >
    </Card>
    <addModal :isShow="isShow" @trueModal="trueModal" @noModal="noModal" />
  </div>
</template>

<script>
import Tables from '_c/tables'
import { getTableData, deleteData, addContent } from '@/api/data'
import addModal from '../../components/addModal/addModal.vue'
export default {
  name: 'tables_page',
  // page: 0,
  // size: 0,
  components: {
    Tables,
    addModal
  },
  data() {
    return {
      total: 0,
      pageNum: 0,
      current: 1,
      isShow: false,
      columns: [
        { title: '收文号', key: 'docNo', sortable: true, width: '160px' },
        { title: '文件标题', key: 'docTitle' },
        { title: '文件属性', key: 'docAttributes' },
        { title: '主办单位', key: 'hostUnitName', sortable: true },
        { title: '来文日期', key: 'receiveDate' },
        { title: '来文号', key: 'sourceDocNo' },
        { title: '来文单位名称', key: 'sourceDocUnitName' },
        {
          title: '操作',
          key: 'handle',
          fixed: 'right',
          width: '200px',
          // options: ['delete'],
          button: [
            (h, params, vm) => {
              return h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '你确定要删除吗?'
                  },
                  on: {
                    // click: () => {
                    //   this.deteData(params.row.id)
                    // }
                    'on-ok': () => {
                      // vm.$emit('on-delete', params.row.id)
                      this.deleteData(params.row.id)
                    }
                  }
                },
                [h('Button', '删除')]
              )
            },
            (h, params, vm) => {
              return h(
                'Button',
                {
                  props: {
                    confirm: true,
                    title: '哈哈?'
                  },
                  style: {
                    marginLeft: '15px'
                  },
                  on: {
                    click: () => {
                      this.show(params)
                    }
                  }
                },
                [h('div', '查看')]
              )
            }
          ]
        }
      ],
      tableData: []
    }
  },
  methods: {
    // 收文
    addContent(params) {
      addContent(params).then((res) => {
        if (res.status === '200') {
          this.$Message.info('点击了确定')
        }
        console.log(res.status, 'lll')
      })
    },
    // 确定
    trueModal(formItem) {
      this.addContent(formItem)
      this.isShow = false
      console.log('66666')
      this.getTableData()
    },
    // 取消
    noModal() {
      this.isShow = false
    },
    // 新增
    goAdd() {
      this.isShow = true
      console.log('this.isShow', this.isShow)
    },
    // 查询
    searchTable(key, value) {
      this.current = 1
      console.log(this.current, 'ppp')
      this.key = key
      this.value = value
      let params = {
        pageNum: 0,
        [this.key]: this.value
      }
      this.getTableData(params)
    },
    // 获取表格数据
    getTableData(params) {
      if (!params) {
        params = {}
      }
      getTableData(params).then((res) => {
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        console.log(this.tableData)
      })
    },
    // 删除
    deleteData(index) {
      deleteData(index).then((res) => {
        if (res.data.code === '200') {
          this.$Message.success('删除成功')
          this.getTableData()
        }
      })
    },
    // 查看
    show(index) {
      this.$Modal.info({
        title: '详细信息'
        // content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
      })
    },
    handleDelete(params) {
      console.log(params)
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      })
    },

    changePage(val) {
      console.log(val, 'val')
      this.pageNum = val
      let params = {
        pageNum: this.pageNum,
        [this.key]: this.value
      }
      this.getTableData(params)
    }
  },
  mounted() {
    this.getTableData()
  }
}
</script>

<style></style>
